<template>
<div>
  <div class="warp_product" v-if="productList.length > 0">
    <van-row gutter="10px">
      <div v-for="(item,index) in productList" :key="index">
        <van-col span="12" class="product">
          <a :href="'/pages/gift_details/main?id=' + item.id" class="product-block">
            <div class="image-view" :style="'background-image:url(' + item.image[0] + ')'">
            </div>
            <div class="product-title">{{item.title}}</div>
            <div class="product-price">
                <text class="product-price-original">{{item.price}}</text>
                <van-button plain type="primary" size="small" class="product-price-original bag">兑换</van-button>
            </div>
          </a>
        </van-col>
      </div>
    </van-row>
  </div>
  <div class="nodata" v-else>
    <van-row>
      <van-col span="24">
        <van-icon custom-class="notIOCN" class="notIOCNWarp" name="notes-o" />
        <div class="notTXT">暂无数据</div>
      </van-col>
    </van-row>
  </div>
</div>
</template>

<script>
import {integral, views} from '../../utils/utils.js'
export default {
  onShareAppMessage (res) {
    if (res.from === 'button') {
      // 增加积分
      this.sharpePage(this.$root.$mp.query.id, 3)
    } else {
      this.sharpePage(this.$root.$mp.query.id, 4)
    }
    return {
      title: '礼品列表',
      imageUrl: '/images/a.png',
      path: '/pages/gift_list/main'
    }
  },
  onReachBottom () {
    let page = this.page + 1
    this.getList(page, this.pagesize)
  },
  data () {
    return {
      title: 'product-list',
      productList: [],
      renderImage: true,
      page: 1,
      pagesize: 6
    }
  },
  methods: {
    // 积分增加， 更新 分享、浏览 、转发数量，增加积分
    // type:share 更新分享数   views  更新浏览数 forwarding 更新转发数
    getIntegral (type = 2) {
      let _this = this
      let id = _this.$root.$mp.query.id
      // 增加积分
      integral(id, type)
      // 增加统计数量  views
      views(id, 'views')
    },
    // 1.签到 2.阅读文章 3.转发文章 4.分享小程序
    sharpePage (id, type = 3) {
      // 增加积分
      integral(id, type)
      // 增加统计数量 share
      views(id, 'share')
    },
    getList (page = this.page, pagesize = this.pagesize) {
      let _this = this
      wx.request({
        url: this.apiUrl + 'api/goods?page=' + page + '&pagesize=' + pagesize,
        success (res) {
          let data = res.data
          if (data.code === 200) {
            wx.stopPullDownRefresh()
            if (page > 1) {
              // 数据追加
              _this.productList.push(...data.data)
              _this.page = _this.page + 1
            } else {
              _this.productList = data.data
            }
          }
        }
      })
    }
  },
  mounted () {
    this.getList()
  }
}
</script>
<style scoped>
page {
  font-size: 12px;
}
.warp_product {
  padding: 5px;
  height:100%;
  background-color:rgba(209, 209, 209, 0.6);
}
.product {
  display: block;
}
.product-block {
  padding: 10px;
  border: 1px solid rgba(190, 190, 190,0.2);
  border-radius: 5px;
  margin:3px;
  background-color: #ffffff;
}
.image-view {
  text-align:center;
  background-position: center;
  background-repeat: no-repeat;
  width: 100%;
  height: 0;
  padding-top: 100%;
  overflow: hidden;
  background-position: center center;
  background-size: cover;
}
.product-image {
  height: 120px;
  width: 100%;
}
.product-title {
  width: 100%;
  word-break: break-all;
  display: -webkit-box;
  overflow: hidden;
  line-height: 20px;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  font-size:16px;
  height: 40px;
  margin:5px 0;
}
.product-price {
  
}
.product-price-original {
  color: #ff3f00;
  font-size: 16px;
  height:30px;
  line-height:30px;
  display:inline-block;
}
.product-price-favour {
  color: #888888;
  text-decoration: line-through;
  margin-left: 10px;
}
.product-tip {
  position: absolute;
  right: 10px;
  background-color: #ff3333;
  color: #ffffff;
  padding: 0 10px;
  border-radius: 5px;
}
.bag {
  color: #ff3333;
  float: right;
  font-size: 16px;
  display:inline-block;
}
</style>
